<template>
<div class="emergency-medical c-f">
  <div class="fr ac mb-20 mt-30">
    <h2 class="title f1">医疗机关信息</h2>
    <a class="f-14 a link ml-20" :href="`/api/medical/batchexport?userid=${$store.state.user.userid}`">导出<i class="el-icon-arrow-right b ml-5"></i></a>
  </div>
  <div class="fr ac search-bar mb-20">
    <div v-if="roleid === 1001" class="fr ac item">
      <div class="label f-14">省份</div>
      <el-input v-model="medical.params.provincecityname"/>
    </div>
    <div v-if="[1001, 1002].includes(roleid)" class="fr ac item">
      <div class="label f-14">城市</div>
      <el-input v-model="medical.params.cityname"/>
    </div>
    <div class="fr ac item">
      <div class="label f-14">区县</div>
      <el-input v-model="medical.params.county"/>
    </div>
    <div class="fr ac item">
      <div class="label f-14">机关名称</div>
      <el-input v-model="medical.params.officename"/>
    </div>
    <el-button type="primary" icon="el-icon-search" @click="getList(1)">搜索</el-button>
  </div>
  <div class="list" v-loading="medical.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <table>
      <thead>
      <th colspan="2">省份</th>
      <th colspan="2">城市</th>
      <th colspan="2">区县</th>
      <th colspan="3">机关名称</th>
      <th colspan="4">地址</th>
      <th colspan="3">单位电话</th>
      <th colspan="2">负责人</th>
      <th colspan="3">负责人电话</th>
      </thead>
      <tbody>
      <tr v-for="item in medical.list" :key="item.medicalid">
        <td colspan="2">{{item.provincecityname}}</td>
        <td colspan="2">{{item.cityname}}</td>
        <td colspan="2">{{item.county}}</td>
        <td colspan="3">{{item.officename}}</td>
        <td colspan="4">{{item.address}}</td>
        <td colspan="3">{{item.workphone}}</td>
        <td colspan="2">{{item.personincharge}}</td>
        <td colspan="3">{{item.contactphone}}</td>
      </tr>
      <tr v-if="!medical.list.length">
        <td colspan="19">无数据</td>
      </tr>
      </tbody>
    </table>
  </div>
  <div class="tc mt-30 page">
    <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :disabled="medical.loading" :pager-count="5" :page-size="10" :total="medical.total" :current-page="medical.current" @current-change="getList"/>
  </div>
</div>
</template>

<script>
export default {
  name: 'emergency-medical',
  data () {
    return {
      medical: { // 医疗机关
        list: [],
        current: 1,
        total: 0,
        loading: false,
        params: {
          officename: '',
          provincecityname: '',
          cityname: '',
          county: ''
        }
      }
    }
  },
  computed: {
    roleid () {
      return this.$store.state.roleid
    }
  },
  methods: {
    getList (current) {
      const item = this.medical
      item.loading = true
      if (current) item.current = current
      this.$http('/medical/fuzzyquery/page', { pagesize: 10, pagecurrent: item.current, ...item.params }).then(
        res => {
          const data = res.data.medical
          item.list = data.records
          item.total = data.total
          item.loading = false
        }
      )
    }
  },
  created () {
    if (this.roleid !== 1001) {
      this.medical.params.provincecityname = this.$store.state.user.province
      if (this.roleid !== 1002) this.medical.params.cityname = this.$store.state.user.cityname
    }
    this.getList()
  }
}
</script>

<style lang="less">
.emergency-medical {
  .search-bar {white-space: nowrap;
    .item {margin-right: 25px;}
    .label {margin-right: 25px;}
  }
  .list {padding: 0 20px;background-color: #000418;
    table {table-layout: fixed;width: 100%;}
    th, td {padding: 20px 12px;font-size: 14px;border: 2px solid rgba(243, 246, 250, .2);
      &:first-child {border-left: 0;}
      &:last-child {border-right: 0;
        span {cursor: pointer;color: #2a36e0;}
        span + span {margin-left: 30px;}
      }
    }
    tr:last-child td {border-bottom: 0;}
    th {border-top: 0;
      color: rgba(255, 255, 255, .8);}
    td {text-align: center;}
  }
}
</style>
